<!-- 视频详情 袁斌 2023年6月19日19:21:01 -->
<template>
  <div class="div1">

    <div class="div2">

      <div style="" class="div-none"></div>
        <div class="div2-1">
            <video width="862px" height="" autoplay controls loop >
              <source :src="'/video/getVideoById?id='+this.videoId" type="video/mp4">
              当前浏览器不支持 video直接播放，点击这里下载视频: <a href="../../assets/尚硅谷Java零基础全套视频教程(宋红康2023版，java入门自学必备).mp4" >下载视频</a>
            </video>
        </div>
      <div class="div2-3" >
        <div class="div2-4">
          <span style="color: aliceblue;">目录</span>
        </div>
        <div class="div2-5">
          <div>
            <ul class="list" >
              <li v-for="item in tableDate" :key="item.id" class="item">
                <span>{{ item.unitName }}</span>
                <ul class="sub-list">
                  <li v-for="childItem in item.joints" :key="childItem.id" :class="{ 'sub-item': true, 'selected': childItem === selectedChildItem }" @click="selectChildItem(childItem)" >
                    {{ childItem.jointIntroduction}}
                    
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <el-card class="div3" style="margin-bottom:20px">
      <el-input type="textarea" v-model="commentForm.commentInfo"></el-input>
      <el-button type="primary" style="float:right;color:black;color:white;margin-bottom:8px;margin-top:8px" @click="addComment"><i class="el-icon-edit" font-size="20px"></i>&nbsp;发布评论</el-button>
    </el-card>
    <el-card class="div3">
      <div class="div3-1">
        <p><span>{{form.courseTitle}}</span> | <span>{{form.introduction}}</span></p>
      </div>
      <div class="div3-2">
      
        <span style="font-size: 24px; color:red;line-height: 53px;" v-if="form.payType=='0'">免费</span>
        <span style="font-size: 24px; color:red;line-height: 53px;" v-if="form.payType=='1'"><b style="font-size:20px">￥</b>{{form.price}}</span>
        <span style="font-size: 14px; line-height: 53px;margin-left: 20px;">11万人累计报名</span>
      </div>
      <div style="color:black">
        <span v-show="sc" style="color:black;margin-left:-1px" class="p1" @click="toggleImage"><i class="el-icon-star-off" font-size="20px"></i>&nbsp;收藏</span>
        <span v-show="ysc" style="color:black;margin-left:-1px" class="p1" @click="toggleImage1"><i class="el-icon-star-on" font-size="20px"></i>&nbsp;已收藏</span>
        <span class="p1" style="color:black"><i class="el-icon-chat-dot-square" font-size="20px"></i>&nbsp;咨询</span>
      </div>
    </el-card>
    <el-card class="div4">
      <div class="div4-1">
        <div class="tab-item" :class="{ active: activeTab === 'intro' }" @click="activeTab = 'intro'">课程介绍</div>
        <div class="tab-item" :class="{ active: activeTab === 'comments' }" @click="activeTab = 'comments'">
          用户评论
        </div>

        <div v-show="activeTab === 'intro'" class="tab-content">
          <!-- 课程介绍内容 -->
          <div class="div4-2">
            <p class="p5">教学服务</p>
            <div class="div4-3">
              <p class="p5-1">
                <img src="../../assets/7.png" class="img2" />
                <span style="">笔面试指导，简历指导</span>
              </p>
              <p class="p5-1">
                <img src="../../assets/7.png" class="img2" />
                <span>学习笔记</span>
              </p>
              <p class="p5-2">
                <img src="../../assets/7.png" class="img2" />
                <span>实时答疑解惑</span>
              </p>
            </div>
            <el-card class="div4-4">
              <p class="p5">教师介绍</p>
              <el-card class="div4-5">
                
                  <img :src="'http://101.43.223.224:8765/image/getImageById?id=' + form.imageId" class="img3" />
                  <span style="float:left; font-size:16px; margin-left:15px;margin-top:25px;">姓名:{{form.tname}}</span>
                  <span style="float:left; font-size:16px; margin-left:15px;margin-top:25px;" v-if="form.tsex=='M'">性别:男</span>
                  <span style="float:left; font-size:16px; margin-left:15px;margin-top:25px;" v-if="form.tsex=='F'">性别:女</span>
                  <span style="float:left; font-size:16px; margin-left:15px;margin-top:25px;">学位:{{form.teducation}}</span>
                  <span style="float:left; font-size:16px; margin-left:15px;margin-top:25px;">工龄:{{form.tseniority}}</span>
                  <br><br><br>
                  <p ><b style="font-size:18px; color: rgb(57, 57, 57);">教师简介</b></p>
                  <span style="font-size:16px; color: rgb(57, 57, 57);">{{form.tintroduction}}</span>
                  <p ><b style="font-size:18px; color: rgb(57, 57, 57);">教师荣誉</b></p>
                  <span style="font-size:16px; color: rgb(57, 57, 57);">{{form.thonor}}</span>
                
              </el-card>
            </el-card>
            <div class="div4-8">
              <p class="p5">课程详情</p>
              <div class="div4-9">
                <img src="../../assets/9.webp" class="img5">
              </div>
            </div>
          </div>
        </div>

        <div v-show="activeTab === 'catalog'" class="tab-content">
          <!-- 课程目录内容 -->
          <p>这里是课程目录的内容。</p>
        </div>
        <div v-show="activeTab === 'comments'" class="tab-content">
          <!-- 用户评论内容 -->
          <div class="div6">

            <el-card v-for="item in commentArr" :key='item.id' style="margin-top:10px">
              <img :src="`http://101.43.223.224:8765/image/getImageById?id=${item.avatarUrl}`" class="img7" v-if="item.avatarUrl!=''&&item.avatarUrl!=null" />
              <img src="../../assets/avav.jpg" class="img7" v-if="item.avatarUrl==''||item.avatarUrl==null" />
              <p style="float:left; margin-left:10px;margin-top:16px; font-size:14px;">{{item.userName}}</p>
              <div class="div6-2">
                <textarea :value=item.commentInfo @input="resizeTextarea" style="width:550px;border:none;font-size:14px;resize:none;margin-left:15px" readonly></textarea>
                <p style="float:right; margin-right:40px;margin-top:3px;margin-top:3px;font-size:12px;color:grey;">{{item.createTime}}</p>
              </div>
              
              <el-popconfirm confirm-button-text='确定' cancel-button-text='我再想想' icon="el-icon-info" icon-color="red" title="您确定删除该评论吗？" @confirm="delById(item.id)">
                <el-link type="danger" slot="reference" v-if="item.userId==userId" style="float:right; margin-right:0px;margin-bottom:10px;font-size:14px;">删除</el-link>
              </el-popconfirm>
            </el-card>
          </div>
        </div>
      </div>
    </el-card>
    <el-card class="div5">
      <div class="div5-1">
        <div class="div5-2">
          <img src="../../assets/8.jpg" class="img6" />
          <p style="font-size:20px; font-weight: 600;margin-top:-45px;margin-left:80px">&nbsp;非凡教育</p>
          <p style="font-size:16px;margin-top:10px"><span style="font-size:18px;font-weight: 600;">98%</span>好评<span style="margin-left:10px"></span><span
              style="font-size:18px;font-weight: 600;">34</span>课程<span style="margin-left:10px"></span><span style="font-size:18px;font-weight: 600;">107万</span>学生</p>
        </div>
        <div class="div5-3">
          <p class="p6">我公司成立于2009年,致力于 IT 技术人才职业培养,经整合并购,于2016年正式创立“渡一教育”,于2017年拓展在线教学市场,覆盖用户超百万。
            公司位于上海、哈尔滨两地，坐落在上海御华山氪空间，与哈尔滨金爵万象大厦。 企业创始人及骨干成员均来自高薪互联网公司，团队成员近百人，团队作风干练，氛围融洽。
            渡一教育,是较早一批开设“web前端”培训的教育公司。课程内容质量扎实,长期以来,一直处于业内前列。公司下设JavaWeb、Python、Web前端、平面设计、电商设计、Data Scientist、Data Analyst等课程。
            截止2019年末,企业市场辐射范围已达多个海外地区。已向高薪互联网企业输送数万精英。 公司通过不断丰富自身产品方向、打磨产品质量,兼并推出IT咨询与服务等配套业务,多维度、多角度为学员解决切身问题,为每位学员赋能。
            “渡一”经营管理体系完备,业务运营模式完善,致力于成为互联网IT教育行业的常青树,参与行业发展与优化,秉持“育人为渡,经久如一”之理念服务用户,基于互联网IT教育行业贡献社会。</p>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>

export default {
  data() {
    return {
      videoSrc:
        "../../assets/尚硅谷Java零基础全套视频教程(宋红康2023版，java入门自学必备).mp4",
      sc: true,
      commentForm: {},
      homePage: [],
      form: {},
      videoId: 0,
      homePages: [],
      commentArr: [],
      homePagess: [],
      ysc: false,
      tableDate: [],
      tableDateAa: [
        {
          id: 1,
          name: "课程一",
          tableDatechildren: [
            {
              id: 2,
              childrenName: "学习Java",
            },
            {
              id: 3,
              childrenName: "学习MySQL",
            },
          ],
        },
        {
          id: 5,
          name: "课程二",
          tableDatechildren: [
            {
              id: 6,
              childrenName: "学习Vue",
            },
          ],
        },
        {
          id: 4,
          name: "课程三",
          tableDatechildren: [
            {
              id: 7,
              childrenName: "学习Docker",
            },
          ],
        },
        {
          id: 4,
          name: "课程三",
          tableDatechildren: [
            {
              id: 7,
              childrenName: "学习Docker",
            },
          ],
        },
        {
          id: 4,
          name: "课程三",
          tableDatechildren: [
            {
              id: 7,
              childrenName: "学习Docker",
            },
          ],
        },
        {
          id: 4,
          name: "课程三",
          tableDatechildren: [
            {
              id: 7,
              childrenName: "学习Docker",
            },
          ],
        },
        {
          id: 4,
          name: "课程三",
          tableDatechildren: [
            {
              id: 7,
              childrenName: "学习Docker",
            },
          ],
        },
      ],
      userId:0,
      selectedChildItem:0,
      activeTab: "intro", // 默认激活的标签页为课程介绍
      count: 0,
      courseId: 0,
    
    };
  },
  mounted() {
    
    this.courseId = window.location.href.split("=")[1];
    this.vShowToggleImage();
    this.homePageSelectedById();
    this.userId = localStorage.getItem("user")
        ? JSON.parse(localStorage.getItem("user")).id
        : 0;
    
  },
  methods: {
    delById(id) {
      this.$axios
        .get("/comment/delById?id=" + id)
        .then((res) => {
          if (res.data.flag) {
            this.homePageSelectedById();
          }
        })
        .catch(() => {});
    },
    addComment() {
      this.commentForm.courseId = this.courseId;
      this.commentForm.userId = localStorage.getItem("user")
        ? JSON.parse(localStorage.getItem("user")).id
        : 0;
      this.$axios
        .post("/comment/insertComment", this.commentForm)
        .then((res) => {
          if (res) {
            this.homePageSelectedById();
          }
        })
        .catch(() => {});
    },
    resizeTextarea(event) {
      event.target.style.height = "auto";
      event.target.style.height = event.target.scrollHeight + "px";
    },
    //获取首页精选课程
    homePageSelectedById() {
      this.$axios
        .get("/conrse/selectCourseInfo", {
          params: {
            id: window.location.href.split("=")[1],
          },
        })
        .then((res) => {
          if (res.data.flag) {
            this.form = res.data.data;
            this.courseId = this.form.id;
            this.homePageUnitById();
            this.selectComment();
          }
        })
        .catch(() => {});
    },

    selectComment() {
      this.$axios
        .get("/comment/selectComment", {
          params: {
            courseId: this.courseId,
          },
        })
        .then((res) => {
          if (res.data.flag) {
            this.commentArr = res.data.data.content;
          }
        })
        .catch(() => {});
    },
    homePageUnitById() {
      this.$axios
        .get("/conrse/homePageUnitById", {
          params: {
            id: this.courseId,
          },
        })
        .then((res) => {
          if (res.data.flag) {
            this.tableDate = res.data.data;
          }
        })
        .catch(() => {});
    },
    videoById() {
      this.$axios
        .get("/video/selectById", {
          params: {
            id: this.videoId,
          },
        })
        .then((res) => {
          if (res.data.flag) {
            // console.log(window.sessionStorage.getItem('void'))
          }
        })
        .catch(() => {});
    },
    toggleImage() {
      this.sc = false;
      this.ysc = true;
      // 修改
    },
    toggleImage1() {
      this.sc = true;
      this.ysc = false;
      // 修改
    },
    vShowToggleImage() {
      // 单查
    },
    selectChildItem(childItem) {
      this.selectedChildItem = childItem;
      this.videoId=childItem.videoId;
      console.log( this.videoId);
      this.videoById();

    },
  },
};
</script>

<style scoped>
textarea {
  width: 100%;
  min-height: 50px;
  max-height: 200px;
  resize: none;
}
div {
  font-family: 微软雅黑;
}
.tab-item {
  display: inline-block;
  padding: 10px;
  cursor: pointer;
}

.tab-item.active {
  /* background-color: #ccc; */
  border-bottom: 2px solid rgb(23, 73, 210);
}

.tab-content {
  margin-top: 10px;
}
.div-none {
  float: left;
  width: 80px;
  height: 467.85;
  background-color: white;
}
.div1 {
  width: 100%;
  height: 4200px;
}
.div2 {
  width: 100%;
  height: 485.883px;
  float: left;
  background-color: rgb(5, 5, 5);
  margin-top: 10px;
  margin-top: 10px;
}
.div2-1 {
  width: 840px;
  height: 485.883px;
  float: left;
  /* background-color: rgb(134, 134, 134); */
}
.div2-2 {
  width: 100%;
  height: 65px;
  float: left;
  margin-top: 10px;
  /* background-color: rgb(224, 193, 193); */
}
.p1 {
  width: 98px;
  height: 30px;

  text-align: center;
  font-size: 17px;
  color: rgb(255, 255, 255);
  line-height: 30px;
  margin-left: 20px;
  cursor: pointer;
}
.img1 {
  width: 20px;
  height: 20px;
  margin-top: 5px;
  float: left;
  margin-left: 12px;
}
.p2 {
  width: 98px;
  height: 30px;
  background-color: rgb(138, 139, 141);
  border-radius: 20px;
  text-align: center;
  font-size: 17px;
  line-height: 30px;
  margin-left: 140px;
  margin-top: -47px;
  cursor: pointer;
}
.p3 {
  width: 98px;
  height: 30px;
  background-color: rgb(138, 139, 141);
  border-radius: 20px;
  text-align: center;
  font-size: 17px;
  line-height: 30px;
  margin-left: 260px;
  margin-top: -45px;
  cursor: pointer;
}
.div2-3 {
  width: 260px;
  height: 100%;
  margin-left: 60px;
  float: left;
}
.div2-4 {
  width: 100%;
  height: 40px;
  font-size: 20px;
  line-height: 40px;
  text-align: center;
}
.div2-5 {
  width: 100%;
  height: 500px;
  color: rgb(255, 255, 255);
}
.list {
  list-style-type: none;
  overflow-y: auto; /* 添加垂直滚动条 */
  height: 500px; /* 设置滚动区域的固定高度 */
}
.list::-webkit-scrollbar {
  width: 10px; /* 设置滚动条宽度 */
}

.list::-webkit-scrollbar-thumb {
  background-color: #888; /* 设置滚动条颜色 */
  border-radius: 4px; /* 设置滚动条边框半径 */
}

.list::-webkit-scrollbar-thumb:hover {
  background-color: #555; /* 设置滚动条悬停时的颜色 */
}
.item {
  padding: 10px;
}

.sub-list {
  list-style-type: none;
  padding: 0;
  margin-top: 5px;
}

.sub-item {
  /* background-color: #67C23A; */
  margin-bottom: 5px;
  padding: 5px;
}
.selected {
  background-color: rgb(0, 0, 0);
  color: rgb(103, 142, 250);
}
.div3 {
  width: 100%;

  background-color: rgb(255, 255, 255);
  float: left;
}
.div3-1 {
  width: 850px;
  height: 60px;
  float: left;
}
.div3-1 p {
  width: 100%;
  height: 30px;
  font-size: 20px;
  line-height: 30px;
  margin-top: 20px;
}
.div3-2 {
  width: 200px;
  height: 60px;
  margin-top: 10px;
  margin-left: 100px;
  float: left;
}
.div3-3 {
  width: 350px;
  height: 100%;
  float: right;
  margin-top: -60px;
}
.div4 {
  width: 860px;
  height: 100%;
  float: left;
  border-radius: 8px;
  background-color: rgb(255, 255, 255);
  margin-top: 20px;
}
/* .div4-1 ::v-deep(.el-tabs__item) {
    width: 100%;
    height: 50px;
    float: right;
    margin-top: 8px;
    background-color: rgb(209, 209, 209);
    font-size: 20px;
  } */
.div4-1 {
  width: 100%;
  height: 50px;
  float: right;
  margin-top: 8px;
  font-size: 20px;
}
.div4-2 {
  width: 100%;
  height: 150px;
  float: left;
  margin-top: 15px;
}
.p5 {
  width: 100%;
  height: 30px;
  font-weight: 600;
  float: left;
  margin-top: 1px;
  margin-left: 10px;
}
.div4-3 {
  width: 800px;
  height: 100px;
  border: 1px solid rgb(139, 139, 139);
  float: left;
  margin-left: 7px;
  margin-top: -5px;
  border-radius: 6px;
}
.p5-1 {
  width: 400px;
  height: 50px;
  font-size: 18px;
  float: left;
  margin-top: 0px;
}
.p5-2 {
  width: 400px;
  height: 50px;
  font-size: 18px;
  float: left;
  margin-top: -18px;
}
.p5-1 span {
  font-size: 18px;
  line-height: 50px;
  margin-left: 15px;
}
.p5-2 span {
  font-size: 18px;
  line-height: 50px;
  margin-left: 15px;
}
.img2 {
  width: 20px;
  height: 20px;
  margin-top: 15px;
  float: left;
  margin-left: 12px;
}
.div4-4 {
  width: 99%;
  
  float: left;
  margin-top: 20px;
}
.div4-5 {
  width: 94%;
 
  background-color: #9dc4e9;
  border-radius: 6px;
  float: left;
  margin-left: 20px;
  margin-bottom: 20px;
}
.div4-6 {
  width: 770px;
  height: 80px;
  float: left;
  margin-left: 10px;
  margin-top: 10px;
}
.div4-7 {
  width: 770px;
  height: 125px;
  float: left;
  margin-left: 10px;
}
.img3 {
  width: 56px;
  height: 56px;
  border-radius: 50px;
  float: left;
  margin-left: 10px;
  margin-top: 5px;
}
.div4-8 {
  width: 100%;
  height: 100%;
  float: left;
  margin-top: 20px;
  /* background-color: rgb(182, 182, 182); */
}
.div4-9 {
  width: 790px;
  height: 100%;
  background-color: aliceblue;
  float: left;
  margin-left: 20px;
}
.img5 {
  width: 100%;
  height: 3600px;
}
.div5 {
  width: 320px;
  height: 800px;
  float: right;
  border-radius: 8px;
  background-color: rgb(255, 255, 255);
  margin-top: 20px;
}
.div5-1 {
  width: 330px;
  height: 100%;

  margin-left: 10px;
}
.div5-2 {
  width: 100%;
  height: 150px;
}
.img6 {
  width: 64px;
  height: 64px;
  border-radius: 50px;

  margin-left: 10px;
  margin-top: 14px;
}
.div5-3 {
  width: 80%;
  height: 800px;
}
.p6 {
  font-size: 16px;
}
.div6 {
  width: 810px;
  height: 100%;
  float: left;
  margin-left: 10px;
}
.div6-1 {
  width: 100%;
  height: 140px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.185);
}
.img7 {
  width: 44px;
  height: 44px;
  border-radius: 50px;
  float: left;
  margin-left: 10px;
  margin-top: 14px;
}
.div6-2 {
  width: 760px;
  height: 65px;
  float: left;
  margin-top: -7px;
  margin-left: 50px;
}
.p7 {
  font-size: 16px;
  margin-top: 4px;
  margin-left: 18px;
}
</style>